<template>
  <view class="page-container">
    <!-- 顶部导航栏 -->
    <uni-nav-bar
      :border="false"
      title="我的粉丝"
      fixed
      left-icon="back"
      @clickLeft="goBack"
    />

    <view class="content">
      <!-- 时间筛选Tab -->
      <view class="tabs-container">
        <scroll-view scroll-x class="tabs-scroll">
          <view class="tabs">
            <view
              v-for="tab in tabs"
              :key="tab.value"
              :class="['tab-item', { active: currentTab === tab.value }]"
              @click="handleTabChange(tab.value)"
            >
              {{ tab.label }}
            </view>
          </view>
        </scroll-view>
      </view>

      <!-- 粉丝列表 -->
      <view class="fans-list">
        <view v-for="fan in fansList" :key="fan.id" class="fan-item">
          <view class="fan-info">
            <!-- 头像 -->
            <image :src="fan.avatar" class="fan-avatar" mode="aspectFill" />

            <!-- 信息 -->
            <view class="fan-details">
              <view class="fan-phone-row">
                <text class="fan-phone">{{ fan.phone }}</text>
                <view v-if="fan.isMember" class="member-badge">
                  <text class="member-text">会员</text>
                </view>
              </view>
              <text class="fan-register-time"
                >注册时间：{{ fan.registerTime }}</text
              >
            </view>
          </view>

          <!-- 查看明细按钮 -->
          <view class="view-group-btn" @click="handleViewGroup(fan)">
            <text>查看明细</text>
          </view>
        </view>

        <!-- 空状态 -->
        <view v-if="fansList.length === 0 && !loading" class="empty-state">
          <text class="empty-text">暂无粉丝数据</text>
        </view>

        <!-- 加载状态 -->
        <view v-if="loading" class="loading-state">
          <uni-load-more status="loading" />
        </view>

        <!-- 加载更多 -->
        <view v-if="hasMore && fansList.length > 0" class="load-more">
          <uni-load-more :status="loadMoreStatus" @clickLoadMore="loadMore" />
        </view>

        <!-- 没有更多 -->
        <view v-if="!hasMore && fansList.length > 0" class="no-more">
          <text class="no-more-text">没有更多了</text>
        </view>
      </view>
    </view>

    <!-- 粉丝筛选弹框 -->
    <FansFilter ref="fansFilterRef" @confirm="handleFilterConfirm" />
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import FansFilter from "./components/FansFilter.vue";

// Tab 配置
const tabs = ref([
  { label: "全部", value: "all" },
  { label: "今日", value: "today" },
  { label: "昨日", value: "yesterday" },
  { label: "近7日", value: "week" },
  { label: "自定义时间", value: "custom" },
]);

// 当前选中的 Tab
const currentTab = ref("all");

// 筛选弹框引用
const fansFilterRef = ref(null);

// 筛选参数
const filterParams = ref({
  inviteTime: 1,
  start: "",
  end: "",
  memberName: "",
});

// 粉丝列表数据
const fansList = ref([]);

// 分页参数
const pageNum = ref(1);
const pageSize = ref(20);
const hasMore = ref(true);
const loading = ref(false);
const loadMoreStatus = ref("more");

// 模拟数据
const mockFansData = [
  {
    id: 1,
    phone: "151****0513",
    avatar: "/static/logo.png",
    isMember: true,
    registerTime: "2025-09-15",
  },
  {
    id: 2,
    phone: "138****4397",
    avatar: "/static/logo.png",
    isMember: true,
    registerTime: "2025-07-14",
  },
  {
    id: 3,
    phone: "177****9464",
    avatar: "/static/logo.png",
    isMember: true,
    registerTime: "2025-06-14",
  },
  {
    id: 4,
    phone: "156****9763",
    avatar: "/static/logo.png",
    isMember: true,
    registerTime: "2025-03-30",
  },
  {
    id: 5,
    phone: "133****4311",
    avatar: "/static/logo.png",
    isMember: true,
    registerTime: "2025-03-30",
  },
  {
    id: 6,
    phone: "136****9921",
    avatar: "/static/logo.png",
    isMember: true,
    registerTime: "2024-12-12",
  },
  {
    id: 7,
    phone: "150****7327",
    avatar: "/static/logo.png",
    isMember: true,
    registerTime: "2024-06-27",
  },
  {
    id: 8,
    phone: "187****4452",
    avatar: "/static/logo.png",
    isMember: false,
    registerTime: "2024-06-24",
  },
];

// 返回
const goBack = () => {
  uni.navigateBack();
};

// 切换Tab
const handleTabChange = (value) => {
  // 如果点击的是自定义时间，打开筛选弹框
  if (value === "custom") {
    fansFilterRef.value?.open(filterParams.value);
    return;
  }

  currentTab.value = value;
  // 重置列表
  pageNum.value = 1;
  fansList.value = [];
  hasMore.value = true;
  // 重新加载数据
  loadFansData();
};

// 处理筛选确认
const handleFilterConfirm = (params) => {
  filterParams.value = params;
  currentTab.value = "custom";

  // 重置列表
  pageNum.value = 1;
  fansList.value = [];
  hasMore.value = true;
  // 重新加载数据
  loadFansData();
};

// 加载粉丝数据
const loadFansData = async () => {
  if (loading.value) return;

  loading.value = true;
  loadMoreStatus.value = "loading";

  try {
    // TODO: 替换为真实 API 调用
    // 模拟API请求延迟
    await new Promise((resolve) => setTimeout(resolve, 500));

    // 模拟数据
    if (pageNum.value === 1) {
      fansList.value = mockFansData;
    } else {
      // 模拟没有更多数据
      hasMore.value = false;
    }

    loadMoreStatus.value = hasMore.value ? "more" : "noMore";
  } catch (error) {
    console.error("加载粉丝数据失败:", error);
    uni.showToast({
      title: "加载失败，请重试",
      icon: "none",
    });
    loadMoreStatus.value = "more";
  } finally {
    loading.value = false;
  }
};

// 加载更多
const loadMore = () => {
  if (!hasMore.value || loading.value) return;

  pageNum.value += 1;
  loadFansData();
};

// 查看明细
const handleViewGroup = (fan) => {
  uni.navigateTo({
    url: `/pages/mine/shareTrendy/fansRewardDetail?fanId=${fan.id}&phone=${fan.phone}`,
  });
};

// 页面加载时获取数据
onMounted(() => {
  loadFansData();
});
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.content {
  padding-top: 20rpx;
}

// Tab 栏
.tabs-container {
  background-color: #fff;
  padding: 24rpx 32rpx;
  margin-bottom: 20rpx;
}

.tabs-scroll {
  white-space: nowrap;
}

.tabs {
  display: inline-flex;
  gap: 16rpx;
}

.tab-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12rpx 24rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  font-size: 26rpx;
  color: #333;
  white-space: nowrap;
  transition: all 0.3s;

  &.active {
    background-color: #ff9500;
    color: #fff;
    font-weight: 500;
  }

  &:active {
    opacity: 0.8;
  }
}

// 粉丝列表
.fans-list {
  padding: 0 32rpx;
}

.fan-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  padding: 24rpx;
  margin-bottom: 20rpx;
  border-radius: 12rpx;

  &:active {
    background-color: #fafafa;
  }
}

.fan-info {
  display: flex;
  align-items: center;
  gap: 24rpx;
  flex: 1;
}

.fan-avatar {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
  background-color: #f5f5f5;
}

.fan-details {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
  flex: 1;
}

.fan-phone-row {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.fan-phone {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.member-badge {
  display: inline-flex;
  align-items: center;
  padding: 4rpx 12rpx;
  background-color: #52c41a;
  border-radius: 4rpx;
}

.member-text {
  font-size: 20rpx;
  color: #fff;
}

.fan-register-time {
  font-size: 24rpx;
  color: #999;
}

.view-group-btn {
  padding: 12rpx 24rpx;
  line-height: 1;
  background-color: #ff9500;
  border-radius: 8rpx;
  margin-left: 16rpx;

  text {
    font-size: 24rpx;
    color: #fff;
  }

  &:active {
    opacity: 0.8;
  }
}

// 空状态
.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}

// 加载状态
.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx 0;
}

// 加载更多
.load-more {
  padding: 20rpx 0;
}

// 没有更多
.no-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx 0;
}

.no-more-text {
  font-size: 24rpx;
  color: #999;
}
</style>
